<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
        <script type="text/javascript" src="jquery.js"></script>
        <style>
            body { overflow: hidden; margin: 0px;padding: 0px; background-color: white; }
            div:first-child { margin-top: 0px; }
            div { cursor: pointer; text-align: left; padding: 0px 0px; font-family: sans-serif;font-size: 0.8em;width: 100px;margin-top: 2px;background: transparent;}
            div:hover {background: #f2f2f2;}
            
            #contacts {color: blue ; text-align:center;font-family:sans-serif;font-size: 0.9em;border-bottom: 1px solid black;}                        
            #logout   {color: red ; border-top: 1px solid black;}
            #login    {color: blue}
            #enable   {color: green}
            #reload   {color: blue; }
            #disable  {color: gray}
            #settings {color: black}
            
        </style>
        <script type="text/javascript">
            var options = {
                disable : function(background){
                    background.toggle(background.disable);
                },
                logout : function(background){
                    background.toggle(background.logout);
                },
                login : function(background) { 
                    background.toggle(background.login);
                },
                enable : function(background) { 
                    background.toggle(background.enable);
                },
                settings : function(background) {
                    background.show_options();       
                },
                reload : function(background){
                    background.reload();
                },
                contacts : function(background){
                    //console.log(background.settings.domain);
                    background.open_contacts();
                },
                select : function(el) {
                    if (this[el.id]){
                        this[el.id](chrome.extension.getBackgroundPage());
                        window.close();
                    }
                }
            };

            function init(){
                $('#login').hide();
                $('#disable').hide();
                $('#enable').hide();
                $('#logout').hide();
                $('#reload').hide();
                var background = chrome.extension.getBackgroundPage();
                if (background.json_contacts==null){
                    $('#login').show();
                }
                else{
                    $('#logout').show();
                    $('#reload').show();
                    if (background.concal_enabled){
                        $('#disable').show();
                    } else {
                        $('#enable').show();
                    }        
                }    
            };
        </script>
    </head>
    <body onload="init()"> 
        <div onclick="options.select(this)" id="contacts">Contacts</div>
        <div onclick="options.select(this)" id="disable"><img src="on.png"> Disable</div>
        <div onclick="options.select(this)" id="enable"><img src="enabled.png"> Enable</div>
        <div onclick="options.select(this)" id="reload"><img id="reload" src="reload.png"> Reload</div>
        <div onclick="options.select(this)" id="login"><img src="on.png"> Login</div>    
        <div onclick="options.select(this)" id="logout"><img src="off.png"> Logout</div>    
        <div onclick="options.select(this)" id="settings"><img src="tools.png"> Settings</div>  
    </body>
</html>

